@include keyframes('login-dialog-tab-fadeIn') {
	to {
		opacity: 1;
	}
}

@include keyframes('login-dialog-tab-fadeOut') {
	to {
		opacity: 0;
	}
}

@include keyframes('login-dialog-login-tab-fadeIn') {
	to {
		opacity: 1;
	}
}

@include keyframes('login-dialog-login-tab-fadeOut') {
	to {
		opacity: 0;
	}
}

.login-dialog {
	width: 500px;
	box-shadow: 0 0 15px 0 rgba(71, 173, 198, 0.6);
	border-radius: 10px;
	background-color: white;
	transition: height 0.3s;
	overflow: hidden;

	.dialog-close {
		color: white;
		font-size: 26px;
		line-height: 32px;
		top: 8px;
		right: 14px;
	}

	.title {
		font-size: 14px;
		color: white;
		line-height: 54px;
		height: 54px;
		background: linear-gradient(53deg, #1db2f3 0%, #47f13f 100%);
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.dialog-content {
		overflow: hidden;
		position: relative;

		& > .tab {
			position: absolute;
			opacity: 0;
			top: 0;
			left: 0;
			width: 100%;
			pointer-events: none;

			&.active {
				// display: block;
				pointer-events: auto;
			}

			&.x-fadeIn {
				@include animation('login-dialog-tab-fadeIn' 0.3s both);
			}

			&.x-fadeOut {
				@include animation('login-dialog-tab-fadeOut' 0.3s both);
			}
		}
	}

	.tab-login {
		height: 306px;
		
		.switch {
			margin-left: auto;
			margin-right: auto;
			margin-top: 20px;
			height: 32px;
			width: 280px;
			display: block;

			li {
				height: 32px;
				font-size: 14px;
				line-height: 32px;
				letter-spacing: 5px;
				text-align: center;
				width: 100px;
				border-bottom: 1px solid #c6c7cd;
				color: #c6c7cd;
				margin-left: 80px;
				cursor: pointer;
				float: left;

				&:first-child {
					margin-left: 0;
				}

				&.active {
					color: #0088ff;
					border-bottom-color: #0088ff;
				}
			}
		}

		.tabs-wrap {
			height: 254px;
			overflow: hidden;
		}

		.tabs {
			height: 254px;
			width: 1000px;
			transition: transform 0.3s;

			& > .tab {
				float: left;
				height: 254px;
				width: 500px;

				&.x-fadeIn {
					@include animation('login-dialog-login-tab-fadeIn' 0.3s both);
				}

				&.x-fadeOut {
					@include animation('login-dialog-login-tab-fadeOut' 0.3s both);
				}
			}

			.tab-account {
				padding-left: 110px;
				padding-right: 110px;
				padding-top: 20px;

				.field {
					height: 32px;
					margin-top: 12px;
					position: relative;

					&:first-child {
						margin-top: 0;
					}

					& > input {
						color: #7e7e7e;
						border-bottom: 1px solid #c6c7cd;
						width: 100%;
						height: 32px;
						line-height: 32px;
						padding-left: 33px;

						@include placeholder {
							color: #c6c7cd;
							letter-spacing: 2px;
						}
					}

					.icon {
						position: absolute;
						font-size: 22px;
						line-height: 32px;
						top: 0;
						left: 0;
					}

					.error {
						font-size: 12px;
						position: absolute;
						right: 6px;
						top: 0;
						line-height: 32px;
						color: #f86c5f;
						display: none;

						&.active {
							display: block;
						}
					}
				}

				.remember-wrap {
					margin-top: 20px;
					color: #a3a1ab;
				}

				.remember {
					display: none;

					& + label {
						cursor: pointer;
						font-size: 14px;
						font-weight: normal;
						margin-bottom: 0;
						padding-left: 22px;
						position: relative;

						&:last-child {
							margin-right: 0;
						}

						&:before {
							content: ' ';
							width: 14px;
							height: 14px;
							border: 1px solid #c6c7cd;
							position: absolute;
							left: 0;
							top: 2px;
						}

						&:after {
							content: ' ';
							width: 15px;
							height: 8px;
							border: 1px solid transparent;
							border-left-color: #0b7bdc;
							border-bottom-color: #0b7bdc;
							transform: rotate(-45deg);
							position: absolute;
							left: 2px;
							top: 2px;
							display: none;
						}
					}

					&:checked {
						& + label {
							&:after {
								display: block;
							}
						}
					}
				}

				.find-password {
					float: right;
					color: #a3a1ab;
				}

				.action {
					height: 42px;
					margin-top: 24px;
				}

				.switch-register {
					float: left;
					background-color: #e0f0fe;
					border: 1px solid #d4e7f7;
					border-radius: 2px;
					color: #b6c7d6;
					letter-spacing: 10px;
					text-align: center;
					text-indent: 10px;
					width: 120px;
					height: 42px;
					font-size: 14px;
					transition: background-color 0.2s color 0.2s;

					&:hover {
						color: white;
						background-color: #0088ff;
					}
				}

				.login {
					float: right;
					background-color: #3ca4ff;
					border-radius: 2px;
					width: 120px;
					height: 42px;
					text-align: center;
					text-indent: 10px;
					letter-spacing: 10px;
					transition: background-color 0.2s;
					color: white;

					&:hover {
						background-color: #0088ff;
					}
				}
			}

			.tab-quick {
				padding-top: 30px;

				.weixin {
					position: relative;
					display: inline-block;
					width: 50%;
					float: left;

					.qrcode-wrap {
						width: 120px;
						height: 120px;
						margin-left: auto;
						margin-right: auto;
						position: relative;
					}

					.qrcode {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;

						&.timeout {
							display: none;

							& + .refresh {
								display: block;
							}
						}
					}

					.refresh {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						display: none;
						text-align: center;
						border: 1px solid #ccc;
						padding-top: 28px;
						font-size: 16px;
						cursor: pointer;

						& > i {
							font-size: 24px;
						}
					}

					.des {
						margin-top: 20px;
						font-size: 12px;
						color: #717279;
						letter-spacing: 2px;
						line-height: 20px;
						text-align: center;
					}

					.spec {
						color: green;
					}

					&:after {
						content: '';
						position: absolute;
						height: 120px;
						width: 1px;
						background-color: #c6c7cd;
						top: 0;
						right: 0;
					}
				}

				.others {
					width: 50%;
					display: inline-block;
					float: left;

					.list {
						height: 120px;

						li {
							float: left;
							width: 45px;
							text-align: center;
							margin-top: 25px;
							margin-left: 20px;
							cursor: pointer;

							&:first-child {
								margin-left: 40px;
							}

							& > i {
								color: #323232;
								font-size: 36px;
								display: block;
								margin-bottom: 4px;
								height: 45px;
								width: 45px;
								line-height: 45px;
							}

							& > span {
								font-size: 12px;
								color: #717279;
							}

							&[data-action="github"]:hover > i {
								color: #4078c0;
							}

							&[data-action="weibo"]:hover > i {
								color: #e5222e;
							}

							&[data-action="qq"]:hover > i {
								color: #12b7f5;
							}
						}
					}

					.des {
						margin-top: 30px;
						color: #717279;
						letter-spacing: 2px;
						text-align: center;
						font-size: 12px;
						line-height: 20px;
					}
				}
			}
		}
	}

	.tab-register {
		height: 490px;
		padding: 0 40px;

		.field-label {
			color: #2a201d;
			letter-spacing: 5px;
			line-height: 14px;
			font-size: 14px;
			margin-bottom: 9px;

			&:first-child {
				margin-top: 30px;
			}
		}

		.field {
			height: 44px;
			background-color: #f0f2f2;
			border: 1px solid #ced2ce;
			margin-bottom: 25px;
			position: relative;

			& > input {
				width: 100%;
				background: transparent;
				line-height: 42px;
				height: 42px;
				padding-left: 11px;
				padding-right: 11px;
			}

			.error {
				font-size: 12px;
				position: absolute;
				right: 6px;
				top: 0;
				line-height: 42px;
				color: #f86c5f;
				display: none;

				&.active {
					display: block;
				}
			}
		}

		.action {
			margin-top: 30px;
			height: 42px;

			.switch-login {
				height: 42px;
				width: 180px;
				background-color: #dfeffd;
				border: 1px solid #d4e7f7;
				letter-spacing: 2px;
				font-size: 14px;
				line-height: 14px;
				color: #b6c7d6;
				transition: background-color 0.2s color 0.2s;
				text-align: center;
				float: left;

				&:hover {
					background-color: #0088ff;
					color: white;
				}
			}

			.register {
				height: 42px;
				width: 180px;
				background-color: #3ca4ff;
				font-size: 14px;
				color: white;
				letter-spacing: 2px;
				line-height: 14px;
				transition: background-color 0.2s;
				margin-left: 40px;
				text-align: center;
				float: left;

				&:hover {
					background-color: #0088ff;
				}
			}
		}
	}
}